<template>
	<view>
		
		<view class="orders">
			<view class="box">
				<!-- <view class="orders-text">收货地址</view>
				<view class="address">
					
				</view> -->
				<view class="list" @tap="selectAddress" >
					<view class="li"  hover-class="hover" > 
						<view class="icon">
							<image :src="'../../../static/images/addess.png'"></image>
						</view>
						<view class="text">
						<view class="text" style="font-weight: bold;">{{myaddress.name}} {{myaddress.tel}}</view>
						<view class="text">{{myaddress.address.region.label}}{{myaddress.address.detailed}} </view>
						</view>
						<image class="to" src="../../../static/HM-PersonalCenter/to.png"></image>
					</view>
				
					
				</view>
			</view>
			
		</view> 
	    <view class="orders-client">
			<view class="box">
				<view class="inputtext">
					<form @submit="formSubmit" @reset="formReset">
						<view  class="goods-item-wrap" v-for="(item,index) in goods" :key="index" >
							<image @click="toGoods()" :src="item.goodsLogo" class="goods-image" />
						
							<view class="goods-content-wrap">
								<view class="goods-name">{{item.goodsName}}</view>
								尺码：{{item.specKey}}  × {{item.goodsNum}}
								<view class="goods-price">
								<view class="shop-title3">
									<view class="shop-title-text">
										￥{{item.marketPrice}}.00
									</view>
								</view>
								
								</view>
							</view>
						</view>
						
						<!-- <view  class="goods-item-wrap" >
							<image @click="toGoods()" :src="goodsDetails.goodsLogo" class="goods-image" />
						
							<view class="goods-content-wrap">
								<view class="goods-name">{{goodsDetails.goodsName}}</view>
						
								<view class="goods-price">
								<view class="shop-title3">
									<view class="shop-title-text">
										￥{{goodsDetails.marketPrice}}.00
									</view>
								</view>
								
								</view>
							</view>
						</view> -->
						
						<view class="uni-form-item uni-column client-input" style="display: flex;">
							<view class="title">*商品ID：</view>
							<input class="" name="goodsId" placeholder="请输入采购学校" :value="goodsDetails.goodsId" />
						
						</view>
						<view class="uni-form-item uni-column client-input" style="display: flex;">
							<view class="title">*学校名称：</view>
							<input class="" name="userCompany" placeholder="请输入采购学校" />
						
						</view>
						<view class="uni-form-item uni-column client-input" style="display: flex;">
							<view class="title">*班级：</view>
							<input class="" name="userClass" placeholder="请输入采购班级" />
						
						</view>
						<view class="uni-form-item uni-column client-input" style="display: flex;">
							<view class="title">*新生名称：</view>
							<input class="" name="userName" placeholder="请输入新生名称" />
						
						</view>
						<view class="uni-form-item uni-column client-radio" style="display: flex;">
							<view class="title">*性别：</view>
							<radio-group class="radio-group" name="userSex">
								<label style="margin-right: 10px;">
									<radio value="男孩" /><text>男孩</text>
								</label>
								<label>
									<radio value="女孩" /><text>女孩</text>
								</label>
							</radio-group>
						</view>
						<!-- <view class="uni-form-item uni-column client-input" style="display: flex;">
							<view class="title">性别：</view>
							<input class="" name="input" placeholder="" />
						
						</view> -->
						<view class="uni-form-item uni-column client-input" style="display: flex;">
							<view class="title">*身高：</view>
							<input class="" name="userHeight" placeholder="单位cm" />
						
						</view>
						<view class="uni-form-item uni-column client-input" style="display: flex;">
							<view class="title">*体重：</view>
							<input class="" name="userWeight"  placeholder="单位kg" />
						
						</view>
						<!-- <view class="uni-form-item uni-column client-radio">
							<view class="title">*尺码：</view>
							<radio-group name="zipcode"  >
								
								<label class="labelClass" v-for="(items,index) in spec_price">
									<radio :value="items.item" />{{items.item}}
								</label>
							</radio-group>
						</view> -->
					
					
					
					<view class="uni-form-item uni-column client-input" style="display: flex;">
						<view class="title">留言：</view>
						<input class="" required  name="userNote" />
					
					</view>
					<view class="uni-form-item uni-column client-input" style="display: none;"  >
						<view class="title">收件人：</view>
						<input class="" required  name="consignee" :value="myaddress.name"/>
					
					</view>
					<view class="uni-form-item uni-column client-input" style="display: none;">
						<view class="title">收件人电话：</view>
						<input class="" required  name="mobile" :value="myaddress.tel"/>
					
					</view>
					<view class="uni-form-item uni-column client-input" style="display: none;">
						<view class="title">收件人地址：</view>
						<input class="" required  name="address" :value="myaddress.address.region.label+myaddress.address.detailed"/>
					
					</view>
					<view class="uni-form-item uni-column client-input" style="display: none;">
						<view class="title">商品数目：</view>
						<input class="" required  name="goodsPrice" :value="toFixed"/>
					
					</view>
					<view class="uni-form-item uni-column client-input" style="display: none;">
						<view class="title">商品金额：</view>
						<input class="" required  name="totalAmount" :value="goodsPrice*toFixed"/>
					
					</view>
					<view class="uni-form-item uni-column client-input" style="display: none;">
						<view class="title">运费：</view>
						<input class="" required  name="shippingPrice" :value="freight*toFixed" />
					
					</view>
					<view class="uni-form-item uni-column client-input" style="display: none;">
						<view class="title">总计：</view>
						<input class="" required  name="orderAmount" :value="goodsPrice*toFixed+freight*toFixed"/>
					</view>
					
					<view class="detail">
						<view class="row">
							<view class="nominal">
								商品金额
							</view>
							<view class="content">
								￥{{goodsPrice*toFixed}}
							</view>
						</view>
						<view class="row">
							<view class="nominal">
								运费
							</view>
							<view class="content">
								￥+{{freight}}
							</view>
						</view>
						<view class="row">
							<view class="nominal">
								总计
							</view>
							<view class="content">
								￥{{goodsPrice*toFixed+freight}}
							</view>
						</view>
					</view>
					
					
					<view class="uni-btn-v" style="margin-top: 20px;">
						<button form-type="submit" >提交</button>
						<!-- <button type="default" form-type="reset">Reset</button> -->
					</view>	
					</form>
				
				
				</view>
				
				
					
				</view>
			</view>
			
		</view> 

		
		
	</view>
</template>


<script>
	export default {
	
		data() {
			return {
				goods:[],
				goodsDetails:{
					goodsLogo:"https://minigroup-v6.oss-cn-beijing.aliyuncs.com/uploads/image/2022-03/3fa790e17aa5b21fec4c2cf490503139.png",
					salesSum:99,
					marketPrice:119.00,
					goodsName:"【小编严选】小程序电商设计稿"
				},
				goodsLogo:"https://minigroup-v6.oss-cn-beijing.aliyuncs.com/uploads/image/2022-03/3fa790e17aa5b21fec4c2cf490503139.png",
				goodsPrice:119,
				spec_price:[
					// {
					// 	item:"100cm"
					// },
					// {
					// 	item:"110cm"
					// },
					// {
					// 	item:"120cm"
					// },
					// {
					// 	item:"130cm"
					// },
				],
				freight:12,
				toFixed:1,
				sumPrice:0,
				inputValue: this.value,
				minDisabled: false,
				maxDisabled: false,
				myaddress:{
					address:{
						detailed:"南山街道双山大道112号B栋1209",
						region:{
							label:"广东省-广州市-南沙区"
						}
					},
					name:"liujiaming",
					tel:"15034909088",
				},
				formdataPoVo:{
					storeGoods:[]
				}
			}
		},
		created(){
			this.maxDisabled = this.isMax;
			this.minDisabled = this.isMin;
		},
		computed: {

		},
		watch: {
			inputValue(number) {
				const data = {
					number: number,
					index: this.index
				}
				this.$emit('eventChange', data);
			}
		},
		onShow() {
			//页面显示时，加载订单信息
		console.log("onShow")
			uni.getStorage({
				key:'selectAddress',
				success: (e) => {
					console.log(e)
					this.myaddress = e.data;
					uni.removeStorage({
						key:'selectAddress'
					})
				}
			})
			
		},
		onLoad:function(obj){
			
			console.log(obj)
			this.goodsPrice=obj.goodsid
			this.request({
					url: '/shop/mall-cart-list',
					method: 'GET',
					
					}).then(res => {
						
						console.log(res)
						this.goods=res.data
					})
			// this.request({
			// 		url: 'shop/mall-goods-detail',
			// 		method: 'GET',
			// 		data:{
			// 			goods_id:obj.goodsid
			// 		},
			// 		}).then(res => {
						
			// 			this.goodsDetails=res.data.detail
			// 			this.goodsPrice=res.data.detail.marketPrice
			// 			this.spec_price=res.data.spec_price
						
			// 		})
			
			
		},
		methods: {
			
			toGoods(){
					// uni.navigateTo({
					// 	  //url:`/pages/detail/detail?cid=51&id=253`
					// 	  url:`/pages/shop/shop_list/goods-detail`
					// })
				
			},
			formSubmit: function(e) {
				
				this.sumPrice=this.goodsPrice*this.toFixed+this.freight*this.toFixed;
				var formdata = e.detail.value
				// uni.showModal({
				// 	content: '表单数据内容：' + JSON.stringify(formdata),
				// 	showCancel: false
				// });
				
				this.formdataPoVo=formdata
				this.formdataPoVo.storeGoods=this.goods
				console.log(this.formdataPoVo)
				 // if(formdata.invoiceTitle!=""&&formdata.taxpayer!=""&&formdata.country!=""
				 // &&formdata.district!=""&&formdata.zipcode!=""){
						uni.showLoading({
							title:'正在提交订单...'
						})
						this.request({
								url: 'shop/mall-orderCart-submit',
								method: 'POST',
								// data:{orderVoPo:JSON.stringify(formdata),
								// storeGoods:JSON.stringify(this.goods)}
								data:JSON.stringify(this.formdataPoVo)
								
								}).then(res => {
									console.log(res)
									
								})
					
						setTimeout(()=>{
							uni.navigateTo({
								url:"/pages/shop/pay/payment/payment?amount="+this.sumPrice
							})
							
						},1000)
				// }else{
					
				// 	uni.showModal({
				// 		content: '请将表单中的必填项填写完毕后提交！！' ,
				// 		showCancel: false
				// 	});
				// }		
				},
				
				formReset: function(e) {
					console.log('清空数据')
				},
				//选择收货地址
				selectAddress(){
					uni.navigateTo({
						 url:"../my/addess?type=select"	
						  // url:`/pages/shop/shop_list/goods-detail`
					})
				},
			
		},
	}
</script>
<style>
	.uni-numbox {
		/* position:absolute; */
		/* left: 30upx;
		bottom: 0; */
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width:60%;
		height: 50upx;
		font-size:50upx;
		/* background:#f5f5f5; */
	}

	.uni-numbox-minus,
	.uni-numbox-plus {
		margin: 0;
		/* background-color: #f5f5f5; */
		width: 70upx;
		height: 100%;
		line-height: 50upx;
		text-align: center;
		position: relative;
		/* border: 1px solid #f5f5f5; */
		/* border-radius: 50%; */
		color: #909399;
		font-size: 50upx;
	}
	.uni-numbox-minus .yticon,
	.uni-numbox-plus .yticon{
		font-size: 50upx;
		color: #555;
	}


	.uni-numbox-value {
		position: relative;
		/* background-color: #f5f5f5; */
		width: 90upx;
		height: 50upx;
		text-align: center;
		padding: 0;
		color: #000000;
		font-size: 50upx;
	}

	.uni-numbox-disabled.yticon {
		color: #d6d6d6;
	}
	.uni-numbox-button{
		
			width: 25upx;
			height: 25upx;
		
	}
</style>

<style lang="scss">
page{background-color:#fff}
.header{
	&.status{padding-top:var(--status-bar-height);}
	background-color:#af1a1d;width:100%;height:37vw;padding:0 4%;display:flex;align-items:center;
	
	
	
	.setting{
		flex-shrink:0;width:6vw;height:6vw;
		image{width:100%;height:100%}
	}
}


.hover{background-color:#eee}
.orders{
	background-color:#af1a1d;width:100%;height:22vw;padding:0 4%;margin-bottom:calc(11vw + 40upx);display:flex;align-items:flex-start;border-radius:0 0 100% 100%;margin-top: -1upx;
	.box{
		width:98%;height:32vw;background-color:#fefefe;border-radius:24upx;box-shadow:0 0 20upx rgba(0,0,0,0.15);margin-bottom:40upx;align-items:center;
		.orders-text{
			width: 100%;
			//background-color: #75bfff;
			// border-bottom: 1px solid #3ca1ff;
			text-align: center;
			margin-top: 2%;
			color:#af1a1d;
			
		}
	}
}

.list{
	width:100%;
	.li{
		margin-top: 5%;width:100%;height:100%;padding:0 4%;display:flex;
	&.noborder{border-bottom:0}
		.icon{
			flex-shrink:0;width:50upx;height:50upx;
			image{width:50upx;height:50upx;margin-top: 10px;}
		}
		.text{margin-top: 2%;padding-left:20upx;width:100%;color:#666;align-items:flex-start}
		.to{flex-shrink:0;width:40upx;height:40upx}
	}
	image{width:50upx;height:50upx;margin-top: 10px;}
}

.orders-client{
	width:100%;padding:0 4%;margin-bottom:calc(11vw + 40upx);display:flex;align-items:flex-start;border-radius:0 0 100% 100%;margin-top: -1upx;
	.box{
		width:100%;background-color:#fefefe;border-radius:24upx;box-shadow:0 0 20upx rgba(0,0,0,0.15);margin-bottom:40upx;align-items:center;
		
	}
}
.client-input{
	width: 100%;
	margin-left: 10px;
	input{
		margin-top: 10px;
	}
}
.client-radio{

	margin-left: 10px;
	.radio-group{
		display: flex;
		margin-top: 10px;
	}
	
}
.labelClass{
	width: 20%;
	
}

.uni-form-item .title {
		padding: 20rpx 0;
	}
.uni-form-item .titleRed {
	color: #af1a1d;
}
.uni-form-item  {
	input{
		width: 70%;
		// border-bottom: 1px solid #666;
	}
}
	
.detail{
	width: 86%;
	padding: 10upx 3%;
	margin: 30upx auto 20upx auto;
	box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
	border-radius: 20upx;
	.row{
		height: 60upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.nominal{
			font-size: 28upx;
		}
		.content{
			font-weight:bold ;
			font-size: 26upx;
			color: #AF1A1D;
			
		}
	}
}


// -------------------- 商品数目  加减    begin----------------

a {
    text-decoration: none;
}

.wrapper {
	display: block;
    font-size: 0;
}

.wrapper .prev,
.wrapper .next {
    display: inline-block;
    height: 42px;
    width: 42px;
    background: #ccc;
    line-height: 42px;
    text-align: center;
    font-size: 25px;
    color: #000;
}

.wrapper .text {
    text-align: center;
    background: #fff;
    height: 42px;
    box-sizing: border-box;
    vertical-align: top;
}

.wrapper .min {
    color: #ccc;
}

// -------------------- 商品数目  加减    end----------------


//       商品新信息  begin   ---------------------
.goods-main {
		min-height: 100vh;
		background: #f7f8fa;
		padding-top: 0rpx;
		padding-bottom: 240rpx;
	}

	.goods-item-wrap {
		background: #FFFFFF;
		display: flex;
		padding: 24rpx;
		margin: 12rpx;
		border-radius: 8rpx;
	}

	.goods-content-wrap {
		width: 80%;
		padding-left: 24rpx;
	}

	.goods-option {
		display: flex;
	}

	.goods-option-item {
		background: #f4f4f6;
	}

	.goods-image {
		width: 190rpx;
		height: 200rpx;
		border-radius: 12rpx;
		flex: none;
	}

	.goods-name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.goods-stock-wrap {
		display: flex;
		color: #969696;
		font-size: 24rpx;
		margin-top: 12rpx;
	}

	.goods-stock {
		margin-right: 24rpx;
	}

	.goods-price {
		font-size: 48rpx;
		color: #AF1A1D;
		margin-top: 24rpx;
	}

	.goods-option-item {
		padding: 8rpx 16rpx;
		border-radius: 36rpx;
		font-size: 24rpx;
		margin-top: 24rpx;
	}

	.goods-option-item:not(:last-child) {
		margin-right: 24rpx;
	}

	.goods-option-item-action {
		background: #f1f0fe;
		color: #6991ce;
	}

	.goods-item-wrap {
		margin-top: 24rpx;
	}

	.goods-header-wrap {
		display: flex;
		align-items: center;
		padding: 24rpx;
		background: #FFFFFF;
	}

	

	

	.goods-header-item {
		margin-right: 24rpx;
	}



	.goods-empty-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40%;
	}
	.shop-title3{
		display: flex;
		
		width: 100%;
		height: 30%;
		font-size: 45rpx;
		vertical-align: bottom;
		//background-color: #412a56;
		image{
			width: 22px;
			height: 22px;
		}
	}
	.shop-title-text{
		width: 52%;
		background-color: #ffffff;
	}
	.shop-title-img{
		/* background-color: #ffffff; */
		width:22px;
		height: 22px;
	}
	
///     商品信息   end ----------------------
</style>
